<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { School, Reading, Document, Plus } from '@element-plus/icons-vue'
import myAxios from '../../../plugins/myAxios'

// 当前选中的模块（院校信息/考试大纲）
const activeModule = ref('schools')

// 学校列表数据
const schoolsList = ref([])
// 当前选中的学校
const selectedSchool = ref(null)
// 科目列表
const subjectsList = ref([])
// 当前选中的科目
const selectedSubject = ref(null)
// 章节列表
const chaptersList = ref([])

// 添加新的响应式变量
const addChapterDialogVisible = ref(false)
const editChapterDialogVisible = ref(false)
const addChapterForm = ref({
  chapterName: '',
  content: ''
})
const editChapterForm = ref({
  id: null,
  chapterName: '',
  content: ''
})

// API请求函数
const fetchSchoolsList = async () => {
  try {
    const data = await myAxios.get('/teacher/researchInfo/university/list')
    schoolsList.value = data
  } catch (error) {
    ElMessage.error('获取院校列表失败：' + error)
  }
}

const fetchSubjectsList = async (schoolId) => {
  try {
    const data = await myAxios.get(`/teacher/researchInfo/subject/getSchool/${schoolId}`)
    subjectsList.value = data
  } catch (error) {
    ElMessage.error('获取科目列表失败：' + error)
  }
}

const fetchChaptersList = async (subjectId) => {
  try {
    const data = await myAxios.get(`/teacher/researchInfo/chapter/getBySubject/${subjectId}`)
    chaptersList.value = data
  } catch (error) {
    ElMessage.error('获取章节列表失败：' + error)
  }
}

// 切换模块
const handleModuleChange = (module) => {
  activeModule.value = module
  selectedSchool.value = null
  selectedSubject.value = null
  // 切换模块时重新获取学校列表
  fetchSchoolsList()
}

// 选择学校
const handleSchoolSelect = async (school) => {
  selectedSchool.value = school
  selectedSubject.value = null
  await fetchSubjectsList(school.id)
}

// 选择科目
const handleSubjectSelect = async (subject) => {
  selectedSubject.value = subject
  await fetchChaptersList(subject.id)
}


const handleSaveNewChapter = async () => {
  try {
    await myAxios.post(`/teacher/researchInfo/chapter/add`, {
      subjectId: selectedSubject.value.id,
      chapterName: addChapterForm.value.chapterName,
      content: addChapterForm.value.content
    })
    ElMessage.success('添加成功')
    addChapterDialogVisible.value = false
    fetchChaptersList(selectedSubject.value.id)
  } catch (error) {
    ElMessage.error('添加失败：' + error)
  }
}

const handleViewChapter = (chapter) => {
  editChapterForm.value = {
    id: chapter.id,
    chapterName: chapter.chapterName,
    content: chapter.content
  }
  editChapterDialogVisible.value = true
}

const handleSaveChapter = async () => {
  try {
    await myAxios.post(`/teacher/researchInfo/chapter/update`, {
      id: editChapterForm.value.id,
      chapterName: editChapterForm.value.chapterName,
      content: editChapterForm.value.content
    })
    ElMessage.success('编辑成功')
    editChapterDialogVisible.value = false
    fetchChaptersList(selectedSubject.value.id)
  } catch (error) {
    ElMessage.error('编辑失败：' + error)
  }
}

// 页面加载时获取学校列表
onMounted(() => {
  fetchSchoolsList()
})
</script>

<template>
  <div class="research-info-container">
    <!-- 顶部选择区域 -->
    <div class="module-selector">
      <el-radio-group v-model="activeModule" size="large">
        <el-radio-button label="schools">
          <el-icon><School /></el-icon>
          广东省院校信息
        </el-radio-button>
        <el-radio-button label="subjects">
          <el-icon><Reading /></el-icon>
          统考科目和考试大纲信息
        </el-radio-button>
      </el-radio-group>
    </div>

    <!-- 内容展示区域 -->
    <div class="content-area">
      <!-- 学校列表 -->
      <div class="list-column">
        <el-card class="list-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><School /></el-icon>
                <span>院校列表</span>
              </div>
            </div>
          </template>
          <el-tree
              :data="schoolsList"
              @node-click="handleSchoolSelect"
              :highlight-current="true"
              node-key="id"
              :props="{ label: 'universityName' }"
              class="custom-tree"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
              </div>
            </template>
          </el-tree>
        </el-card>
      </div>

      <!-- 科目列表 -->
      <div class="list-column" v-if="selectedSchool">
        <el-card class="list-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><Reading /></el-icon>
                <span>科目列表</span>
                <!--                <span class="subtitle">{{ selectedSchool.name }}</span>-->
              </div>
            </div>
          </template>
          <el-tree
              :data="subjectsList"
              @node-click="handleSubjectSelect"
              :highlight-current="true"
              node-key="id"
              :props="{ label: 'subjectName' }"
              class="custom-tree"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
              </div>
            </template>
          </el-tree>
        </el-card>
      </div>

      <!-- 章节列表 -->
      <div class="list-column" v-if="selectedSubject">
        <el-card class="list-card" shadow="hover">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><Document /></el-icon>
                <span>章节列表</span>
                <span class="subtitle">{{ selectedSubject.chapterName }}</span>
              </div>
            </div>
          </template>
          <el-tree
              :data="chaptersList"
              :highlight-current="true"
              node-key="id"
              :props="{ label: 'chapterName' }"
              class="custom-tree"
          >
            <template #default="{ node, data }">
              <div class="custom-tree-node">
                <span>{{ node.label }}</span>
                <div class="operation-buttons">
                  <el-button link type="primary" @click.stop="handleViewChapter(data)">查看</el-button>
                </div>
              </div>
            </template>
          </el-tree>
        </el-card>
      </div>
    </div>

    <!-- 添加章节对话框 -->
    <el-dialog
        v-model="addChapterDialogVisible"
        title="添加章节"
        width="500px"
    >
      <el-form :model="addChapterForm" label-width="80px">
        <el-form-item label="章节名称">
          <el-input
              v-model="addChapterForm.chapterName"
              placeholder="请输入章节名称"
          />
        </el-form-item>
        <el-form-item label="章节概述">
          <el-input
              v-model="addChapterForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入章节概述"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addChapterDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSaveNewChapter">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 编辑/查看章节对话框 -->
    <el-dialog
        v-model="editChapterDialogVisible"
        :title="editChapterForm.id ? '编辑章节' : '章节详情'"
        width="500px"
    >
      <el-form :model="editChapterForm" label-width="80px">
        <el-form-item label="章节名称">
          <el-input
              v-model="editChapterForm.chapterName"
              placeholder="请输入章节名称"
              :readonly="!editChapterForm.id"
          />
        </el-form-item>
        <el-form-item label="章节概述">
          <el-input
              v-model="editChapterForm.content"
              type="textarea"
              :rows="4"
              placeholder="请输入章节概述"
              :readonly="!editChapterForm.id"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editChapterDialogVisible = false">关闭</el-button>
          <el-button
              type="primary"
              @click="handleSaveChapter"
              v-if="editChapterForm.id"
          >
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.research-info-container {
  padding: 20px;
  height: 100%;
  min-height: calc(100vh - 60px); // 减去顶部导航栏的高度
  background-color: #f5f7fa;
  box-sizing: border-box;

  .module-selector {
    margin-bottom: 20px;
    text-align: center;
    background-color: #fff;
    padding: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);

    :deep(.el-radio-button__inner) {
      padding: 12px 36px;
      font-size: 15px;

      .el-icon {
        margin-right: 8px;
        vertical-align: middle;
      }
    }
  }

  .content-area {
    display: flex;
    gap: 20px;
    height: calc(100vh - 180px); // 减去顶部选择器和导航栏的高度
    min-height: 500px; // 设置最小高度

    .list-column {
      flex: 1;
      min-width: 280px;
      height: 100%;
      display: flex;
      flex-direction: column;

      .list-card {
        flex: 1;
        height: 100%;
        transition: all 0.3s;
        margin: 0;

        &:hover {
          transform: translateY(-2px);
        }

        :deep(.el-card__body) {
          height: calc(100% - 60px);
          padding: 0;
          overflow-y: auto;
        }
      }
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 20px;

      .header-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 500;

        .el-icon {
          font-size: 18px;
          color: #409EFF;
        }

        .subtitle {
          color: #909399;
          font-size: 14px;
          margin-left: 8px;
          &:before {
            content: '(';
          }
          &:after {
            content: ')';
          }
        }
      }
    }

    .custom-tree {
      padding: 12px 16px;
      height: 100%;
      box-sizing: border-box;

      :deep(.el-tree-node__content) {
        height: 40px;
        border-radius: 4px;
        margin-bottom: 4px;
        padding: 0 12px;
        transition: all 0.3s;

        &:hover {
          background-color: #ecf5ff;
        }

        &.is-current {
          background-color: #409eff1a;
          color: #409eff;
          font-weight: 500;
        }
      }
    }
  }
}

// 添加滚动条样式美化
:deep(*::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

:deep(*::-webkit-scrollbar-thumb) {
  background: #dcdfe6;
  border-radius: 3px;
}

:deep(*::-webkit-scrollbar-track) {
  background: #f5f7fa;
  border-radius: 3px;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;

  .operation-buttons {
    opacity: 0;
    transition: opacity 0.3s;
  }

  &:hover .operation-buttons {
    opacity: 1;
  }
}
</style>

